<template>
  <div>
    <el-card :bordered="false" dis-hover class="ivu-mt">
      <el-form
        ref="artFrom"
        :model="questionFrom"
        label-width="50px"
        label-position="left"
        @submit.native.prevent
        inline
      >
        <el-form-item label="搜索：" label-for="nickname">
          <el-input
            v-model="questionFrom.keywords"
            placeholder="请输入搜索关键字"
            element-id="nickname"
            clearable
          >
            <el-select v-model="questionFrom.fieldKey" slot="prepend" style="width: 100px">
              <el-option value="title" label="门店名称"></el-option>
              <el-option value="link_name" label="联系人"></el-option>
              <el-option value="link_mobile" label="联系电话"></el-option>
            </el-select>
          </el-input>
        </el-form-item>

        <el-form-item label="城市" label-for="status">
          <el-select v-model="cityId" placeholder="请选择" :filterable="true" element-id="status" @change="orderSearchs">
            <el-option value="all" label="全部"></el-option>
            <el-option
              :value="item.id"
              v-for="item in city_list"
              :key="item.id"
              :label="item.cityName"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="状态" label-for="status">
          <el-select
            v-model="status"
            placeholder="请选择城市"
            element-id="status"
            @change="orderSearchs"
          >
            <el-option value="all" label="全部"></el-option>
            <el-option value="0" label="隐藏"></el-option>
            <el-option value="1" label="显示"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            label="default"
            class="mr15"
            @click="orderSearchs"
          ></el-button>
          <el-button class="ResetSearch" @click="reset('questionFrom')">重置</el-button>
        </el-form-item>

        <el-row type="flex">
          <el-button
            type="primary"
            class="mr20"
            @click="edit(0)"
            v-hasPermi="['company-add']"
          >添加门店</el-button>
        </el-row>
        <el-table
          :data="companyList"
          ref="table"
          class="mt25"
          :loading="loading"
          highlight-row
          no-userFrom-text="暂无数据"
          no-filtered-userFrom-text="暂无筛选结果"
        >
          <el-table-column label="ID" fixed="left">
            <template slot-scope="scope">{{scope.row.id}}</template>
          </el-table-column>
          <el-table-column label="门店信息" min-width="180">
            <template slot-scope="scope">
              <div>门店名称：{{scope.row.title}}</div>
              <div>所属城市：{{scope.row.cityName}}</div>
              <div>酬劳比例：{{scope.row.companyRate||0.00}}%</div>
            </template>
          </el-table-column>
          <el-table-column label="登录账号" min-width="150">
            <template slot-scope="scope">{{scope.row.loginName}}</template>
          </el-table-column>
          <el-table-column label="联系人" min-width="150">
            <template slot-scope="scope">{{scope.row.linkName}}</template>
          </el-table-column>
          <el-table-column label="联系人手机" min-width="150">
            <template slot-scope="scope">{{scope.row.linkMobile}}</template>
          </el-table-column>
          <el-table-column label="状态">
            <template slot-scope="{ row, index }">
              <el-switch
                v-model="row.status"
                :active-value="1"
                :inactive-value="0"
                @change="onchangeStatus(row)"
                active-text="显示"
                inactive-text="隐藏"
                size="large"
              ></el-switch>
            </template>
          </el-table-column>

          <el-table-column label="是否禁用">
            <template slot-scope="{ row, index }">
              <el-switch
                v-model="row.isDisable"
                :active-value="1"
                :inactive-value="0"
                @change="setDisable(row)"
                active-text="是"
                inactive-text="否"
                size="large"
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="添加时间" min-width="150">
            <template slot-scope="scope">{{scope.row.addTimeStr}}</template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" min-width="150">
            <template slot-scope="{ row, index }" >
              <a @click="edit (row.id)">详情</a>
              <el-divider direction="vertical" />
              <a @click="del(row,index)">删除</a>
              <el-divider direction="vertical" />
              <a @click="CompanyCateList(row)" v-hasPermi="['company_cate_relate']">开通分类</a>
            </template>
          </el-table-column>
        </el-table>
        <div class="acea-row row-right page">
          <el-pagination
            :total="total"
            :current-page="questionFrom.page"
            @current-change="pageChange"
            :page-size="questionFrom.limit"
          />
        </div>
      </el-form>
    </el-card>
    <el-dialog
      :visible.sync="modals"
      title="门店详情"
      :closable="false"
      width="50%"
      @close="cancel"
    >
      <company-edit ref="companyEdit" v-if="modals" :id="table.id" @submitSuccess="submitSuccess"></company-edit>
      <div slot="footer">
        <el-button @click="modals = false">取消</el-button>
        <el-button type="primary" @click="setCompany()" >提交</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :visible.sync="openCateList"
      width="700"
      title="开通分类"
      :closable="false"
      class="order_box"
    >
      <company-cate-list v-if="openCateList" :company_id="company_id"></company-cate-list>
      <div slot="footer">
        <el-button @click="openCateList = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  cityList,
  getCompanyListApi,
  setCompanyStatusApi,
  setCompanyDisableApi,
  companyDelApi,
} from '@/api/base';
import companyEdit from './handle/companyEdit.vue';
// 开通分类组件
import companyCateList from './handle/companyCateList.vue';
export default {
  name: 'companyList',
  components: {
    companyEdit,
    //公司分类列表组件
    companyCateList,
  },
  data() {
    return {
      grid: {
        xl: 7,
        lg: 7,
        md: 12,
        sm: 24,
        xs: 24,
      },
      modals: false,
      companyRelateModals: false,
      table:{
        id:0
      },
      questionFrom: {
        status: 'all',
        keywords: '',
        fieldKey: 'title',
        page: 1,
        limit: 10,
      },
      status: 'all',
      companyList: [],
      loading: false,
      company_id: 0,
      city_list: [],
      city_id: 'all',
      total: 0,
      serviceChildCateList: false,

      // 分类列表、添加分类
      openCateList: false,
      citySelectOpen: false,
    };
  },
  created() {
    this.getList();
    this.getCitys();
  },
  activated() {
    this.getList();
  },
  mounted() {},
  methods: {
    //获取城市列表
    getCitys() {
      cityList({limit:999}).then((res) => {
        let data = res;
        this.city_list = data.list;
      });
    },
    getList() {
      this.loading = true;
      this.questionFrom.status = this.status;
      this.questionFrom.cityId = this.cityId;
      getCompanyListApi(this.questionFrom)
        .then(async (res) => {
          let data = res;
          let list = data.list;
          let count = data.total;
          this.total = count;
          this.companyList = list;
          this.loading = false;
          this.citySelectOpen = data.citySelect;
        })
        .catch((res) => {
          this.loading = false;
          this.$message.error('查询不到任何数据');
        });
    },
    pageChange(index) {
      this.questionFrom.page = index;
      this.getList();
    },
    cancel(){
      this.table.id = 0;
      this.modals = false;
    },
    selectCategory() {
      this.questionFrom.page = 1;
      this.getList();
    },
    selectType(e) {
      this.questionFrom.page = 1;
      this.getList();
    },
    examSearchs(e) {
      this.questionFrom.page = 1;
      this.getList();
    },
    setDisable(row) {
      let form = {
        id: row.id,
        isDisable: row.isDisable,
      };
      setCompanyDisableApi(form)
        .then((row) => {
          this.$message.success('操作成功');
          this.getList();
        })
        .catch((err) => {
          this.$message.error(err.msg);
        });
    },
    // 审核提交
    setCompany() {
      this.$refs.companyEdit.submit();
    },
    //提交表单成功
    submitSuccess(){
      this.modals = false;
      this.getList();
    },
    // 表格搜索
    orderSearchs() {
      this.questionFrom.page = 1;
      this.getList();
    },
    // 重置
    reset() {
      (this.questionFrom = {
        status: 'all',
        keywords: '',
        fieldKey: 'title',
        page: 1,
        limit: 10,
        city_id: 'all',
      }),
        (this.status = 'all');
      this.city_id = 'all';
      this.getList();
    },
    edit(id) {
      if(id){
        this.table.id = id;
        this.modals =true;
      }
      else{
        this.modals = true
      }
    },
    // 门店删除
    del(row, num) {
      this.$modalSure(`删除门店${row.title}`)
        .then(() => {
          companyDelApi(row.id).then(res => {
            this.$message.success('删除成功');
            this.getList();
          }).catch(err => {
            this.$message.error('删除失败');
          })
        })
    },
    // 单独修改显示/隐藏
    onchangeStatus(row) {
      let data = {
        id: row.id,
        status: row.status,
      };
      setCompanyStatusApi(data)
        .then((res) => {
          this.modals = false;
          this.$message.success('操作成功');
          this.getList();
        })
        .catch((err) => {
          this.$message.error('操作失败');
        });
    },
    // 门店服务项目
    getCompanyRelate(date) {
      this.companyRelateModals = true;
      this.company_id = date.id;
    },
    //获取服务子分类列表
    getServiceChildCate(date) {
      this.serviceChildCateList = true;
      this.company_id = date.id;
    },

    //公司分类
    CompanyCateList(lisData) {
      let that = this;
      //打开列表
      that.openCateList = true;
      this.company_id = lisData.id;
    },
  },
};
</script>

<style>
</style>
<style scoped lang="stylus">
.treeSel>>>.ivu-select-dropdown-list {
  padding: 0 10px !important;
  box-sizing: border-box;
}

.tabBox_img {
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>